<template>
  <div>
    <myheaders></myheaders>
    <br /><br />
    <!-- 面包屑导航 -->
    <Breadcrumb :datas="datas"></Breadcrumb>
    <section class="featured-block text-center">
      <div class="container"></div>
      用户名：<input type="text" v-model="username" /> <br /><br />
      密码：<input type="password" v-model="password" /><br /><br />
      <center>
        <!-- 滑块验证码 -->
        <drag-verify
          :width="width"
          :height="height"
          :text="text"
          ref="Verify"
        ></drag-verify>
      </center>
      <br /><br />
      <img
        style="cursor:pointer"
        :src="sina_img_url"
        @click="sina"
      />&nbsp;&nbsp;&nbsp;
      <Button @click="submit">登录</Button>&nbsp;&nbsp;&nbsp;
      <img
        style="cursor:pointer"
        :src="dingding_img_url"
        @click="dingding"
      />&nbsp;&nbsp;&nbsp;
      <Button color="green" @click="clear">重置</Button>
    </section>
    <myfooters></myfooters>
  </div>
</template>


 
<script>
// 导入头部组件
import myheader from "./myheader";
// 导入尾部组件
import myfooter from "./myfooter";
// 导包
import dragVerify from "vue-drag-verify";
import { config } from "../config";

export default {
  data() {
    return {
      datas: [{ title: "首页", route: { name: "index" } }, { title: "登录" }],
      username: "",
      password: "",
      // 滑块验证码
      text: "请将滑块验证码拖动到右侧",
      width: 250,
      height: 40,
      sina_img_url: config["sina_img_url"],
      dingding_img_url: config["dingding_img_url"]
    };
  },
  mounted: function() {},
  methods: {
    //   登录
    submit: function() {
      if (this.username == "") {
        this.$Message("用户名不能为空");
        return false;
      }
      if (this.password == "") {
        this.$Message("密码不能为空");
        return false;
      }
      // 验证是否拖动验证码
      if (this.$refs.Verify.isPassing == false) {
        this.$Message("请拖动验证码");
        return false;
      }
      // 请求后台登录接口
      this.axios({
        url: "http://localhost:8000/login/",
        params: {
          username: this.username,
          password: this.password
        }
      }).then(res => {
        this.$Message(res.data.msg);
        if (res.data.code == 200) {
          localStorage.setItem("username", res.data.username);
          localStorage.setItem("uid", res.data.uid);
          localStorage.setItem("filename", res.data.filename);
          localStorage.setItem("videoname", res.data.videoname);
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("type", res.data.type);
          this.$router.push("/");
        }
        if (res.data.code == 201) {
          localStorage.setItem("username", res.data.username);
          localStorage.setItem("uid", res.data.uid);
          localStorage.setItem("videoname", res.data.videoname);
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("Qiniu_src", res.data.filename);
          localStorage.setItem("type", res.data.type);
          this.$router.push("/");
        }
      });
    },

    // 微博登录
    sina: function() {
      // 组装url
      let url =
        "https://api.weibo.com/oauth2/authorize?client_id=2636039333&redirect_uri=http://127.0.0.1:8000/md_admin/weibo";
      window.location.href = url;
    },
    // 重置
    clear: function() {
      // 将用户名和密码清空
      (this.username = ""), (this.password = "");
    },

    // 钉钉登录
    dingding: function() {
      let url =
        "https://oapi.dingtalk.com/connect/qrconnect?appid=dingoaukgkwqknzjvamdqh&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://localhost:8000/dingding_back/";
      window.location.href = url;
    }
  },
  //   定义组件
  components: {
    myheaders: myheader,
    myfooters: myfooter,
    dragVerify: dragVerify
  }
};
</script>
 
<style>
</style>